<template>
  <div class="diagnosis_result" ref="capture">
    <div class="result_top">
      <div class="result_top-one">
        <div>掌上精选账号诊断结果</div>
        <div class="one-btn" @click="$router.push('/inAnalysis/diagnosisSearch')">重新诊断</div>
      </div>
      <div class="result_top-two">
        <div>数据查询时间: {{ timestamp(timeUnix, "Y-M-D h:m") }}</div>
        <div class="two-color" @click="$router.push('/inAnalysis/diagnosisHishtory')">查看诊断记录</div>
      </div>
    </div>
    <div class="result_tips">
      <div style="position: relative">
        &nbsp;诊断结果,如需详细诊断及优化建议,请
        <span
          @mouseover="showKeFu = true"
          @mouseleave="showKeFu = false"
          style="color: #fd7f2c; cursor: pointer"
        >联系客服</span>
        <!-- 二维码 -->
        <div class="erweima" v-show="showKeFu">
          <!-- <img src="@/assets/meng/i24.jpg" alt /> -->
          <img src="@/assets/img/xiaozhushou_qr.jpg" alt />
          <div>工作日: 9:30 - 19:00</div>
        </div>
      </div>
      <div class="tips-export" @click="exportPdf">
        <span></span> 导出
      </div>
    </div>
    <div class="result_user" v-if="author">
      <div class="result_user_info" @click="livedetails">
        <div class="user_info-portrait">
          <img :src="author.logo" alt />
        </div>
        <div class="user_info-summary">
          <div class="summary-name">
            <div class="name">{{ author.nickName }}</div>
            <div class="image" v-if="author.isShop">
              <img src="../../../../assets/meng/search_result01.png" alt />
            </div>
            <div class="btn" v-if="author.category">{{ author.category }}</div>
          </div>
          <div class="summary-station" v-if="author.verifyName">
            <img class="station-icon" src="../../../../assets/meng/search_result03.png" alt />
            {{ author.verifyName }}
          </div>
          <div class="summary-number">抖音号 : {{ author.uniqueId }}</div>
        </div>
      </div>
      <div class="result_watermark">
        <img src="../../../../assets/shi/znfxEg.png" alt />
      </div>

      <div class="result_user_master">
        <div class="master-top">
          <div class="master-top-item">
            <div>
              <div class="item-number">{{ format_num(author.totalFans) }}</div>
              <div class="item-text">粉丝总量</div>
            </div>
          </div>
          <div class="master-top-item">
            <div>
              <div class="item-number">{{ author.totalVideo }}</div>
              <div class="item-text">作品总量</div>
            </div>
          </div>
          <div class="master-top-item">
            <div>
              <div class="item-number">{{ author.liveCount }}</div>
              <div class="item-text">直播场次</div>
            </div>
          </div>
          <div class="master-top-item">
            <div>
              <div class="item-number">{{ format_num(author.totalFavorite) }}</div>
              <div class="item-text">点赞总数</div>
            </div>
          </div>
          <div class="master-top-item">
            <div>
              <div class="item-number">{{ format_num(author.proCount) }}</div>
              <div class="item-text">商品数</div>
            </div>
          </div>
          <div class="master-top-item">
            <div>
              <div class="item-number">{{ format_num(author.liveShopCount) }}</div>
              <div class="item-text">带货直播</div>
            </div>
          </div>
        </div>
        <!-- <div class="master-bottom">
          简介： <span v-html="author.introduce"></span>
        </div>-->
      </div>
      <!-- <div class="result_user_btn">
        <div class="btn-details" @click="livedetails">查看详情</div>
      </div>-->
    </div>
    <div class="result_judge">
      <div class="result_judge-item" v-for="(item, index) in authorDia" :key="index">
        <div class="judge-item-title">
          <img v-if="item.diagnosisType == 0" src="../../../../assets/shi/zhrz.png" alt />
          <img v-if="item.diagnosisType == 1" src="../../../../assets/shi/sapzd.png" alt />
          <img v-if="item.diagnosisType == 2" src="../../../../assets/shi/sipzd.png" alt />
          <img v-if="item.diagnosisType == 3" src="../../../../assets/shi/zbzd.png" alt />
          {{
          item.diagnosisType == 0
          ? "账号认证"
          : item.diagnosisType == 1
          ? "商品诊断"
          : item.diagnosisType == 2
          ? "视频诊断"
          : "直播诊断"
          }}
        </div>
        <div class="judge-item-content" v-html="item.describe">
          <!-- {{ item.describe }} -->
        </div>
        <div class="judge-item-flxed" v-if="item.grade">
          <img v-if="item.grade == 'A'" src="../../../../assets/shi/A.png" alt />
          <img v-if="item.grade == 'B'" src="../../../../assets/shi/B.png" alt />
          <img v-if="item.grade == 'C'" src="../../../../assets/shi/C.png" alt />
          <img v-if="item.grade == 'B+'" src="../../../../assets/shi/B+.png" alt />
        </div>
      </div>
    </div>
    <template v-if="showPage">
      <div class="result_broadcast">
        <div class="result_broadcast_title">
          <img src="../../../../assets/shi/livezd.png" alt />
          直播间诊断
        </div>
        <div class="result_watermark">
          <img src="../../../../assets/shi/znfxEg.png" alt />
        </div>
        <div class="result_broadcast_box">
          <div class="broadcast_box-left" @click="liveRoomDetails">
            <img :src="liveListItem.logo" alt />
          </div>
          <!-- 切换的直播间列表 -->
          <div class="live-room-list" v-if="showRoom == true">
            <div class="live-room_title">
              <div class="title-text">带货直播间 TOP10</div>
              <div class="title-img" @click="showRoom = false">
                <img src="../../../../assets/shi/delete.png" alt />
              </div>
            </div>
            <div class="live-room_wrap">
              <div
                class="live-room_content"
                v-for="(liveRoom, roomIndex) in liveList"
                :key="liveRoom.roomId + '_' + roomIndex"
              >
                <img
                  class="content-img"
                  src="@/assets/wang/work/checked.png"
                  v-if="liveRoom.roomId == defaultRoom"
                />
                <img
                  @click="defaultRoomItem(roomIndex)"
                  src="@/assets/wang/work/unchecked.png"
                  class="checkImg"
                  v-if="liveRoom.roomId != defaultRoom"
                />
                <img
                  class="content-logo"
                  @click="toLiveRoomList(roomIndex)"
                  :src="liveRoom.logo"
                  alt
                />
                <div class="content-wrap" @click="toLiveRoomList(roomIndex)">
                  <div class="title">{{ liveRoom.roomTitle }}</div>
                  <div class="center">
                    <div>开始时间: {{ timestamp(liveRoom.beginTime, "Y-M-D h:m") }}</div>
                    <div>
                      直播时长:
                      {{
                      format_time(
                      (liveRoom.endTime - liveRoom.beginTime) * 1000
                      )
                      }}
                    </div>
                  </div>
                  <div class="bottom">
                    <div>
                      商品数:
                      <span style="color: #ff7418">
                        {{
                        format_num(liveRoom.liveProCount)
                        }}
                      </span>
                    </div>
                    <div>
                      销量:
                      <span style="color: #fd7f2c">
                        {{
                        format_num(liveRoom.liveVolume)
                        }}
                      </span>
                    </div>
                    <div>
                      销售额:
                      <span>{{ format_num(liveRoom.livesales) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="broadcast_box-center" @click="liveRoomDetails">
            <div class="center-title">
              <img
                v-if="liveListItem.IsRed"
                class="img1"
                src="../../../../assets/meng/pop02.png"
                alt
              />
              <img
                v-if="liveListItem.IsShop"
                class="img2"
                src="../../../../assets/meng/pop01.png"
                alt
              />
              <div>{{ liveListItem.roomTitle }}</div>
            </div>
            <div class="center-time">
              <span>开始时间： {{ timestamp(liveListItem.beginTime, "Y-M-D h:m") }}</span>
              <span style="margin: 0 26px">
                结束时间：
                <span v-if="liveListItem.status == 2">
                  {{
                  timestamp(liveListItem.endTime, "Y-M-D h:m")
                  }}
                </span>
                <span v-else>- -</span>
              </span>
              <span>
                直播时长：
                {{
                format_time(
                (liveListItem.endTime - liveListItem.beginTime) * 1000
                )
                }}
              </span>
            </div>
          </div>
          <div class="broadcast_box-right">
            <div style="width: 100%; height: 32px" @click="showRoom = !showRoom">
              <div class="box-right-room">
                切换直播间
                <img
                  @mouseleave="showLive = false"
                  v-if="showLive"
                  src="../../../../assets/wang/goods/what01.png"
                />
                <img
                  @mouseenter="showLive = true"
                  v-else
                  src="../../../../assets/meng/search_result04.png"
                  alt
                />
              </div>
              <div class="after-live-box" v-if="showLive">可切换近30日直播间，每次查询可免费切换1次，超出按照正常查询计算次数</div>
            </div>
            <!-- <div class="box-right-text">
              *
              可切换近30日直播间，每次查询可免费切换1次，超出按照正常查询计算次数
            </div>-->
          </div>
        </div>
        <div class="result_broadcast_bottom">
          <div class="broadcast_bottom-item">
            <div class="number">{{ format_num(liveListItem.avgonlinePeople) }}</div>
            <div class="text">平均在线人数</div>
          </div>
          <div class="broadcast_bottom-item">
            <div class="number">{{ liveListItem.avgLookTime }}</div>
            <div class="text">人均看播时长</div>
          </div>
          <div class="broadcast_bottom-item">
            <div class="number">{{ format_num(liveListItem.uv) }}</div>
            <div class="text">UV价值</div>
          </div>
          <div class="broadcast_bottom-item">
            <div class="number">{{ format_num(liveListItem.avgPrice) }}</div>
            <div class="text">客单价</div>
          </div>
          <div class="broadcast_bottom-item">
            <div class="number">{{ format_num(liveListItem.liveProCount) }}</div>
            <div class="text">商品数</div>
          </div>
          <div class="broadcast_bottom-item">
            <div class="number">{{ format_num(liveListItem.liveVolume) }}</div>
            <div class="text">直播销量</div>
          </div>
          <div class="broadcast_bottom-item">
            <div class="number">{{ format_num(liveListItem.livesales) }}</div>
            <div class="text">直播销售额</div>
          </div>
        </div>
      </div>

      <div class="result_judge">
        <div class="result_judge-item" v-for="(diaList, idx) in topList" :key="idx">
          <div class="title-two">
            {{
            diaList.diagnosisType == 4
            ? "转粉率"
            : diaList.diagnosisType == 5
            ? "互动率"
            : diaList.diagnosisType == 6
            ? "留存"
            : diaList.diagnosisType == 7
            ? "商品"
            : diaList.diagnosisType == 8
            ? "观众画像"
            : diaList.diagnosisType == 9
            ? "观众来源"
            : diaList.diagnosisType == 10
            ? "客单价"
            : "其它"
            }}
          </div>
          <div class="judge-item-content" v-html="diaList.describe">
            <!-- {{ diaList.describe }} -->
          </div>
          <div class="judge-item-flxed">
            <img v-if="diaList.grade == 'A'" src="../../../../assets/shi/A.png" alt />
            <img v-if="diaList.grade == 'B'" src="../../../../assets/shi/B.png" alt />
            <img v-if="diaList.grade == 'C'" src="../../../../assets/shi/C.png" alt />
            <img v-if="diaList.grade == 'B+'" src="../../../../assets/shi/B+.png" alt />
          </div>
        </div>
      </div>

      <div class="result_bottom">
        <div class="result_watermark">
          <img src="../../../../assets/shi/znfxEg.png" alt />
        </div>
        <div class="result_bottom-item" v-for="(btmList, i) in btmList" :key="i">
          <div class="item-wrap">
            <div class="item-wrap_title">
              {{
              btmList.diagnosisType == 4
              ? "转粉率"
              : btmList.diagnosisType == 5
              ? "互动率"
              : btmList.diagnosisType == 6
              ? "留存"
              : btmList.diagnosisType == 7
              ? "商品"
              : btmList.diagnosisType == 8
              ? "观众画像"
              : btmList.diagnosisType == 9
              ? "观众来源"
              : btmList.diagnosisType == 10
              ? "客单价"
              : "其它"
              }}
            </div>
            <div class="item-wrap_text" v-html="btmList.describe">
              <!-- {{ btmList.describe }} -->
            </div>
            <div class="item-wrap_img">
              <!-- <img src="../../../../assets/meng/search_result02.png" alt="" /> -->
              <img v-if="btmList.grade == 'A'" src="../../../../assets/shi/A.png" alt />
              <img v-if="btmList.grade == 'B'" src="../../../../assets/shi/B.png" alt />
              <img v-if="btmList.grade == 'C'" src="../../../../assets/shi/C.png" alt />
              <img v-if="btmList.grade == 'B+'" src="../../../../assets/shi/B+.png" alt />
            </div>
          </div>
        </div>
      </div>
    </template>
    <div v-if="!showPage" class="result_noLive">
      <img src="@/assets/shi/logicImg.png" alt />
      <div>该主播暂未开通直播哦 ~</div>
    </div>

    <!-- 剩余次数 -->
    <el-dialog
      :visible.sync="useCountPop"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="400px"
    >
      <div class="useCountBox">
        <p class="text01">{{ vipName }}每月可使用{{ numberofvisits }}次</p>
        <p class="text02">
          当前已使用
          <span>{{ numberofvisits - surplusCount }}次</span>，剩余
          <span>{{ surplusCount }}次</span>，
        </p>
        <p class="text03">
          本次查询将消耗
          <span>1次</span>机会，确认查询吗？
        </p>
        <div class="optionBox">
          <button
            class="upgradeBtn"
            v-if="surplusCount == 0 && isMaxVip == false"
            @click="toBuy"
          >升级会员</button>
          <el-popover placement="bottom" trigger="hover">
            <div class="message_content">
              <div class="popper_arrow"></div>
              <img src="@/assets/img/xiaozhushou_qr.jpg" />
              <div>工作日：9:30--18:30</div>
            </div>
            <button
              class="upgradeBtn"
              v-if="surplusCount == 0 && isMaxVip == true"
              slot="reference"
            >联系客服</button>
          </el-popover>
          <button
            class="upgradeBtn"
            v-if="surplusCount > 0"
            @click="
              useCountPop = false;
              startDiagnosis();
            "
          >确定</button>
          <button class="cancelBtn" v-if="surplusCount > 0" @click="useCountPop = false">取消</button>
          <button class="cancelBtn" v-if="surplusCount == 0" @click="useCountPop = false">取消</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
export default {
  name: 'DiagnosisResult',
  props: {},
  data() {
    return {
      showPage: true,

      timeUnix: 0,
      authorId: 3671985629168663,
      diagId: 68,
      roomId: '', //直播间Id
      headerData: {},

      defaultRoom: 0, //切换直播间的索引值
      showLive: false, //控制直播间经过时，说明的显示与隐藏
      showKeFu: false, // 控制显示二维码
      showRoom: false, //控制显示直播间

      resultData: {}, //接口返回的所有数据
      author: [], // 获取的个人信息
      authorDia: [], //  切换直播间列表的数据

      liveListItem: [], // 直播间诊断数据 默认选中的第一条
      liveList: [], // 直播间诊断以及下面列表的数据

      liveTopList: [], //直播间诊断上边的四个小盒子的数据
      liveBottomList: [], //直播间诊断底部的大盒子的数据

      removalList: [], //roomId去重后的数组

      // 剩余次数
      useCountPop: false, //是否显示
      vipLevel: '',
      numberofvisits: 0, //总次数
      surplusCount: 0, //剩余次数
      vipName: '',
      isMaxVip: Boolean //是否是最高级别的会员
    };
  },
  components: {},
  computed: {
    topList() {
      if (this.liveListItem.diaList) {
        return this.liveListItem.diaList.slice(0, 4);
      }
    },
    btmList() {
      if (this.liveListItem.diaList) {
        return this.liveListItem.diaList.slice(4);
      }
    }
  },
  created() {
    document.title = '账号诊断&智能分析服务平台-掌上精选';
  },
  mounted() {
    this.getResultData();
    // this.changeLiveRoom()
  },

  // watch: {
  //   roomId() {
  //     this.changeLiveRoom();
  //   },
  // },
  methods: {
    getResultData() {
      this.$axios({
        method: 'get',
        url: '/api/author/GetAuthorDiagnosis',
        params: {
          // authorId: this.$store.state.authorId,
          // diagId: this.$store.state.diagId,
          authorId: localStorage.getItem('authorId'),
          diagId: localStorage.getItem('diagId')
        }
      }).then(res => {
        this.resultData = res.data.data.diagnosis;
        this.author = res.data.data.diagnosis.author;
        this.authorDia = res.data.data.diagnosis.authorDia;
        if (res.data.data.diagnosis.liveList.length == 0) {
          this.showPage = false;
        }
        // this.liveListItem = res.data.data.diagnosis.liveList[0];
        this.roomId = res.data.data.diagnosis.liveList[0].roomId;
        this.defaultRoom = res.data.data.diagnosis.liveList[0].roomId;
        this.liveList = res.data.data.diagnosis.liveList;
        this.timeUnix = res.data.data.timeUnix;
        this.changeLiveRoom();
      });
    },

    // 切换直播间时获取的直播间诊断页面数据
    changeLiveRoom() {
      this.$axios({
        method: 'get',
        url: '/api/author/GetAuthorLiveDiagnosis',
        params: {
          authorId: localStorage.getItem('authorId'),
          diagId: localStorage.getItem('diagId'),
          roomId: this.roomId
        }
      }).then(res => {
        this.liveListItem = res.data.data;
        this.defaultRoom = this.roomId;
      });
    },
    // 切换直播间事件
    defaultRoomItem(i) {
      this.roomId = this.liveList[i].roomId;
      this.$axios({
        method: 'get',
        url: '/api/author/GetAuthorLiveDiagnosisRoomIds',
        params: {
          authorId: localStorage.getItem('authorId'),
          diagId: localStorage.getItem('diagId')
        }
      }).then(res => {
        let arr = res.data.data;
        for (let j = 0; j < arr.length; j++) {
          if (this.removalList.indexOf(arr[j]) === -1) {
            this.removalList.push(arr[j]);
          }
        }
        console.log('去重后的roomID', this.removalList);
        if (this.removalList.indexOf(this.roomId) == -1 && this.removalList.length > 1) {
          // 说明直播间切换了两次了,并且是切换的新的直播间
          this.showRoom = false;
          this.toMatch();
        } else {
          this.roomId = this.liveList[i].roomId; //需要判断后
          this.defaultRoom = this.liveList[i].roomId;
          this.showRoom = false;
          // this.defaultRoom = i; //需要判断后
          this.changeLiveRoom();
          // console.log('次数足够正常切换直播间INdex',this.defaultRoom)
          // this.liveListItem = this.liveList[i]; //需要判断后
          // console.log('liveListItem',this.liveListItem);
        }
      });
    },

    livedetails() {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${localStorage.getItem('authorId')}/0`
      });
      window.open(router.href, '_blank');
    },
    liveRoomDetails() {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${this.liveListItem.roomId}/0`
      });
      window.open(router.href, '_blank');
    },
    toLiveRoomList(i) {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${this.liveList[i].roomId}/0`
      });
      window.open(router.href, '_blank');
    },

    // 获取剩余次数和弹窗
    toMatch() {
      let that = this;
      that.$axios
        .get('/api/customer/GetNumberofvisitsDetailed', {
          params: {
            API: '/api/author/SyncAuthorDiagnosis' //要访问的接口地址
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            // 0是不限制次数
            if (res.data.data.numberofvisits > 0) {
              that.numberofvisits = res.data.data.numberofvisits; //限制次数
              that.vipName = res.data.data.vipName; //vipname
              that.surplusCount = res.data.data.surplusCount; //剩余次数
              that.isMaxVip = res.data.data.isMaxVip; //是否是最高级别的会员
              that.useCountPop = true;
            } else {
              // 这里面是不弹弹窗直接请求.
              console.log('这里面是不弹弹窗直接请求');
              that.startDiagnosis();
              // that.changeLiveRoom()
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
      this.useCountPop = true;
    },
    // 确定按钮
    startDiagnosis() {
      this.wrapBoxLoading = true;
      this.$axios({
        method: 'get',
        url: '/api/author/GetDiagnosis'
        // params: {
        //   authorId: localStorage.getItem("authorId"),
        // },
      }).then(() => {
        this.changeLiveRoom();
      });
    },
    // 升级会员
    // 升级会员
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy/0`
      });
      window.open(router.href, '_blank');
    },

    // 导出pdf
    exportPdf() {
      let _this = this;
      document.documentElement.scrollTop = 0;
      let canvas = document.createElement('canvas'); // 生成canvas上下文
      let context = canvas.getContext('2d');
      let _articleHtml = this.$refs.capture;
      let _w = _articleHtml.clientWidth; //获取需要导出pdf区域的宽度和高度
      let _h = _articleHtml.clientHeight;
      let scale = 3; //将画布宽&&高放大 增加清晰度
      if (_w > _h) {
        _h = _w;
      }
      canvas.width = _w * scale;
      canvas.height = _h * scale;
      context.scale(scale, scale);
      context.fillStyle = '#f5f5f5';
      let opts = {
        scale: 1,
        width: _w, //dom 原始宽度
        height: _h,
        canvas: canvas,
        useCORS: true //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
      };
      // 以上部分都是为了强化清晰度的，放大canvas画布
      html2canvas(_articleHtml, opts).then(canvas => {
        _this.createPdfAll(canvas, scale);
      });
    },
    //自定义宽高
    createPdfAll(canvas, scale) {
      let contentWidth = canvas.width / scale;
      let contentHeight = canvas.height / scale;
      let pdf = new jsPDF('', 'pt', [contentWidth, contentHeight]); //自定义宽高
      let pageData = canvas.toDataURL('image/jpeg', 1.0); //转换图片为dataURL
      pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight); //添加图像到页面
      pdf.save(`账号诊断-${this.author.nickName}.pdf`);
    }
  }
};
</script>

<style scoped lang="less">
.diagnosis_result {
  padding-bottom: 60px;
  // 弹窗
  .useCountBox {
    box-sizing: border-box;
    width: 400px;
    height: 260px;
    background-color: #ffffff;
    border-radius: 4px;
    p {
      text-align: center;
      span {
        font-size: 16px;
        color: #fd7f2c;
      }
    }
    .text01 {
      font-size: 20px;
      color: #222222;
      padding-top: 43px;
    }
    .text02 {
      padding-top: 16px;
      font-size: 16px;
      color: #555555;
      line-height: 30px;
    }
    .text03 {
      font-size: 16px;
      color: #555555;
      line-height: 30px;
    }
    .optionBox {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 40px;
      .upgradeBtn {
        width: 120px;
        height: 44px;
        background-color: #fd7f2c;
        border-radius: 4px;
        font-size: 16px;
        color: #ffffff;
      }
      .cancelBtn {
        width: 120px;
        height: 44px;
        border-radius: 4px;
        border: solid 1px #fd7f2c;
        font-size: 16px;
        color: #fd7f2c;
        margin-left: 30px;
      }
    }
  }
}
.result_top {
  margin-top: 14px;
  padding: 0 22px;
  border-radius: 4px;
  background-color: #fff;
  .result_top-one {
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #222222;
    .one-btn {
      width: 88px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      color: #fff;
      background-color: #fd7f2c;
      cursor: pointer;
    }
  }
  .result_top-two {
    height: 34px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    // font-weight: 500;
    color: #888888;
    .two-color {
      color: #fd7f2c;
      cursor: pointer;
    }
  }
}
.result_tips {
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #555555;
  .erweima {
    position: absolute;
    top: 20px;
    right: 0;
    padding: 10px 15px;
    text-align: center;
    background-color: #fff;
    z-index: 99;
    img {
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
    }
  }
  .tips-export {
    width: 70px;
    height: 32px;
    font-size: 14px;
    line-height: 30px;
    box-sizing: border-box;
    text-align: center;
    color:#67ac5b;    
    border-radius: 4px;
    border: 1px solid #67ac5b;
    span{
        display: inline-block;
        width:14px;
        height:14px;
        background:url('../../../../assets/zhao/daoc.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top:2px;
      }
  }
  .tips-export:hover{
     color: #80be76;
      border-color:#80be76;
      span{
         background:url('../../../../assets/zhao/daoc_h.png') no-repeat;
        background-size: 100% 100%;
      }
  }
}
.result_user {
  position: relative;
  height: 112px;
  padding: 20px 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background-color: #fff;
  .result_watermark {
    width: 350px;
    height: 140px;
    position: absolute;
    top: 170px;
    left: 90px;
    z-index: 99;
    img {
      width: 100%;
      height: 100%;
      opacity: 0.6;
    }
  }
  .result_user_info {
    width: 356px;
    display: flex;
    cursor: pointer;
    .user_info-portrait {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .user_info-summary {
      margin-left: 16px;
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
    }
    .summary-name {
      display: flex;
      .name {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 18px;
        font-weight: 700;
        color: #222222;
      }
      .name:hover {
        color: #ff924b;
      }
      .image {
        width: 16px;
        height: 16px;
        margin: 0 6px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .btn {
        width: 50px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border: 1px solid #1679ff;
        border-radius: 100px;
        color: #1679ff;
        background-color: #f5f9ff;
      }
    }
    .summary-station {
      display: flex;
      font-size: 13px;
      color: #555555;
      .station-icon {
        width: 16px;
        height: 16px;
      }
    }
    .summary-number {
      margin-top: 6px;
      font-size: 14px;
      color: #555555;
    }
  }
  .result_user_master {
    flex: 1;
    // width: 680px;
    height: 100%;
    .master-top {
      height: 100%;
      display: flex;
      align-items: center;
      .master-top-item {
        flex: 1;
        text-align: center;
      }
      .master-top-item > div {
        display: inline-block;
      }
      .item-number {
        font-size: 18px;
        text-align: center;
        font-family: DINAlternate-Bold;
      }
      .item-text {
        text-align: center;
        font-size: 14px;
        margin-top: 6px;
        color: #555555;
      }
    }
    .master-bottom {
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #888888;
    }
  }
  .result_user_btn {
    position: relative;
    flex: 1;
    height: 100%;
    .btn-details {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 88px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      color: #fff;
      background-color: #ff7418;
      cursor: pointer;
    }
  }
}
.result_judge {
  height: 290px;
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  border-radius: 4px;

  .result_judge-item {
    position: relative;
    flex: 1;
    margin-left: 14px;
    border-radius: 4px;
    background-color: #fff;
  }
  .result_judge-item:nth-child(1) {
    margin-left: 0;
  }
  .judge-item-title {
    // height: 40px;
    // line-height: 40px;
    padding: 17px 20px 0;
    font-weight: 700;
    border-radius: 4px 4px 0 0;
    color: #222222;
    // background: linear-gradient(left, #faece2 0%, #fff 80%);
    img {
      width: 16px;
      height: 16px;
      margin-bottom: 4px;
    }
  }
  // .result_judge-item:nth-child(2) > .judge-item-title {
  //   background: linear-gradient(left, #dbf9fb 0%, #fff 80%);
  // }
  // .result_judge-item:nth-child(3) > .judge-item-title {
  //   background: linear-gradient(left, #fbe3e8 0%, #fff 80%);
  // }
  // .result_judge-item:nth-child(4) > .judge-item-title {
  //   background: linear-gradient(left, #f1e6fd 0%, #fff 80%);
  // }
  .title-two {
    // height: 40px;
    // line-height: 40px;
    padding: 22px 20px 0;
    font-size: 14px;
    font-weight: 700;
    color: #222222;
    border-radius: 4px 4px 0 0;
    background: #fff;
  }
  .judge-item-content {
    padding: 0 20px;
    margin-top: 20px;
    line-height: 25px;
    font-size: 14px;
    color: #555555;
  }
  .judge-item-flxed {
    width: 38px;
    height: 38px;
    position: absolute;
    right: 14px;
    top: 10px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
.result_broadcast {
  position: relative;
  height: 224px;
  margin-top: 14px;
  border-radius: 4px;
  background-color: #fff;
  .result_watermark {
    width: 350px;
    height: 140px;
    position: absolute;
    top: 270px;
    right: 140px;
    z-index: 99;
    img {
      width: 100%;
      height: 100%;
      opacity: 0.6;
    }
  }
  .result_broadcast_title {
    padding: 17px 20px 0;
    font-weight: 700;
    border-radius: 4px 4px 0 0;
    // padding-left: 22px;
    // font-weight: 700;
    // border-radius: 4px 0 0 0;
    color: #222222;
    // background: linear-gradient(left, #dbf9fb 0%, #fff 80%);
    img {
      width: 16px;
      height: 16px;
      vertical-align: baseline;
    }
  }
  .result_broadcast_box {
    position: relative;
    height: 120px;
    display: flex;
    padding: 20px 22px;
    box-sizing: border-box;
    .broadcast_box-left {
      width: 58px;
      height: 100%;
      border-radius: 6px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
    }
    .broadcast_box-center {
      height: 100%;
      flex: 1;
      padding-top: 10px;
      margin-left: 10px;
      box-sizing: border-box;
      cursor: pointer;
      .center-title:hover {
        color: #ff924b;
      }
      .center-title {
        display: flex;
        .img1 {
          width: 14px;
          height: 16px;
          margin-right: 6px;
          vertical-align: middle;
        }
        .img2 {
          width: 18px;
          height: 16px;
          margin-right: 6px;
          vertical-align: middle;
        }
      }
      .center-time {
        margin-top: 6px;
        font-size: 14px;
        color: #555555;
      }
    }
    .broadcast_box-right {
      width: 220px;
      .box-right-room {
        position: relative;
        width: 108px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        float: right;
        border-radius: 4px;
        color: #fd7f2c;
        border: 1px solid #fd7f2c;
        box-sizing: border-box;
        cursor: pointer;
        img {
          width: 14px;
          height: 14px;
          vertical-align: baseline;
        }
      }
      .after-live-box {
        width: 174px;
        height: 80px;
        position: absolute;
        top: -60px;
        right: -50px;
        padding: 11px;
        box-sizing: border-box;
        font-size: 12px;
        color: #fff;
        background: url('../../../../assets/shi/popup.png') no-repeat;
      }
      .box-right-text {
        margin-top: 10px;
        font-size: 12px;
        color: #555555;
      }
    }
  }
  .live-room-list {
    position: relative;
    width: 520px;
    overflow: auto;
    position: absolute;
    top: 60px;
    right: 22px;
    border-radius: 4px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 20px #555555;
    z-index: 99;
    .live-room_title {
      display: flex;
      justify-content: space-between;
      .title-text {
        font-weight: 700;
        color: #222222;
      }
      .title-img {
        width: 24px;
        height: 24px;
        img {
          width: 100%;
          height: 100%;
          border: 1px solid #555555;
          border-radius: 50%;
        }
      }
    }
    .live-room_wrap {
      height: 450px;
      overflow: auto;
      margin-top: 20px;
      .content-img {
        width: 20px;
        height: 20px;
      }
    }
    .live-room_content {
      height: 104px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgb(231, 229, 229);
      .content-logo {
        width: 60px;
        height: 74px;
        margin: 0 10px;
        border-radius: 4px;
        cursor: pointer;
      }
      .content-wrap {
        cursor: pointer;
        div {
          color: #555555;
          font-size: 14px;
        }
        .title {
          font-size: 14px;
          font-weight: 600;
          color: #222222;
        }
        .title:hover {
          color: #ff924b;
        }
        .center {
          display: flex;
          margin: 2px 0;
          div {
            margin-right: 30px;
          }
        }
        .bottom {
          display: flex;
          div {
            margin-right: 30px;
          }
        }
      }
    }
  }
  .result_broadcast_bottom {
    display: flex;

    .broadcast_bottom-item {
      flex: 1;
      text-align: center;
      .number {
        font-size: 18px;
        font-family: DINAlternate-Bold;
      }
      .text {
        margin-top: 6px;
        font-size: 14px;
        color: #555555;
      }
    }
  }
}
.result_bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  .result_watermark {
    // width: 480px;
    // height: 190px;
    width: 350px;
    height: 140px;
    position: absolute;
    top: 214px;
    left: 90px;
    z-index: 99;
    img {
      width: 100%;
      height: 100%;
      opacity: 0.6;
    }
  }
  .result_bottom-item {
    width: 50%;
    margin-top: 14px;
    box-sizing: border-box;
  }
  .result_bottom-item:nth-child(odd) {
    padding-left: 7px;
  }
  .result_bottom-item:nth-child(even) {
    padding-right: 7px;
  }
  .item-wrap {
    position: relative;
    padding: 0 22px 14px;
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .item-wrap_title {
    // height: 46px;
    // line-height: 46px;
    padding-top: 22px;
    font-size: 14px;
    font-weight: 700;
    color: #222222;
  }
  .item-wrap_text {
    min-height: 200px;
    margin-top: 10px;
    line-height: 25px;
    font-size: 14px;
    color: #555555;
  }
  .item-wrap_img {
    width: 38px;
    height: 38px;
    position: absolute;
    right: 14px;
    top: 10px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.result_noLive {
  width: 100%;
  height: 424px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #555555;
}
</style>
